<template>
	 <view class="imgGroup" :style="{flexWrap: list.length >= 4 ? 'wrap' : null}">
	    <!-- :style="{width: list.length >= 4 ? '50%' : '100%', height: height ? height : null}" -->
			<image 
				v-for="(item) in list" :key="item.pic" :src="item.pic" 
				@tap="navigateTo(item.entrance)"
				lazy-load="true"
				:class="list.length >= 4 ? 'imgGroupItem specialImgItem' : 'imgGroupItem'"
				:style="{height: height ? height : getImageHeight(item.pic)} "
			/>
	  </view>
</template>

<script>
	import {parsePath, extractParams} from '../utils/index.js'
	import {mapMutations} from 'vuex'
	export default {
		// props: ['list', 'height'],
		props: {
			list: {
				type: Array,
				default: () => []
			},
			height: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			...mapMutations(['setCategoryId']),
			navigateTo(entrance) {
				if (!entrance) {
					return
				}
				const url = parsePath(entrance)
				const params = extractParams(url)
				console.log('img-group---', url)
				if (url.includes('category')) {
					this.setCategoryId(params.catalogId)
					// getApp().globalData.categoryId = params.catalogId
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({url})
				}
			},
			getImageHeight(imgLink) {
				if (!imgLink) return {}
				const reg = /(\d{2,3}x\d{2,3})/
				// console.log('matchReg---', imgLink, reg.exec(imgLink))
				const matchResult = reg.exec(imgLink)[0]
				if (!matchResult) return {}
				const sizeArr = matchResult.split('x')
				return sizeArr[1] + 'rpx'
			},
		}
	}
</script>

<style>
.imgGroup {
  display: flex;
	flex-direction: row;
  /* flex-grow: 1; */
}
.imgGroupItem {
	/* #ifdef H5 || MP-WEIXIN */
	width: 100%;
	/* #endif */
	/* #ifdef APP-PLUS */
	flex: 1;
	/* #endif */
	height: 110px;
	/* height: auto; */
  display: block;
}

.specialImgItem {
	/* #ifdef H5 || MP-WEIXIN */
	width: 50%;
	/* #endif */
	/* #ifdef APP-PLUS */
	flex: none;
	width: 375rpx;
	/* #endif */
}
</style>
